<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/webpage/include/taglib.jsp"%>
<html>
<head>
    <title>款项选择</title>
    <meta name="decorator" content="ani"/>
    <%@ include file="/webpage/include/bootstraptable.jsp"%>
    <script type="text/javascript">
        var rowMap = {};
        $(document).ready(function() {
            //初始化表格
            $('#table').bootstrapTable({
                clickToSelect: true,
                //请求方法
                method: 'post',
                //类型json
                dataType: "json",
                contentType: "application/x-www-form-urlencoded",
                //是否显示行间隔色
                striped: true,
                //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                cache: false,
                //是否显示分页（*）
                pagination: true,
                //排序方式
                sortOrder: "asc",
                //初始化加载第一页，默认第一页
                pageNumber:1,
                //每页的记录行数（*）
                pageSize: 5,
                //可供选择的每页的行数（*）
                pageList: [5, 10,  'ALL'],
                //这个接口需要处理bootstrap table传递的固定参数,并返回特定格式的json数据
                url: "${ctx}/actuserchange/actUserChange/getEntryList?userold=${userold}&rowIds=${rowIds}",
                //默认值为 'limit',传给服务端的参数为:limit, offset, search, sort, order Else
                //queryParamsType:'',
                ////查询参数,每次调用是会带上这个参数，可自定义
                queryParams : function(params) {
                    var searchParam = $("#searchForm").serializeJSON();
                    searchParam.pageNo = params.limit === undefined? "1" :params.offset/params.limit+1;
                    searchParam.pageSize = params.limit === undefined? -1 : params.limit;
                    searchParam.orderBy = params.sort === undefined? "" : params.sort+ " "+  params.order;
                    return searchParam;
                },
                //分页方式:client客户端分页，server服务端分页（*）
                sidePagination: "server",
                onClickRow:function (row,$element) {
                    $('.info').removeClass('info');//移除class
                    $($element).addClass('info');//添加class
                    if(rowMap[row.act] == undefined){
                        addRow('#selectedList', selectedRowIdx, selectedTpl, row);
                        selectedRowIdx = selectedRowIdx + 1;
                    }
                },
                onShowSearch: function () {
                    $("#search-collapse").slideToggle();
                },
                columns: [{
                    checkbox: true
                }, {
                    field: 'actname',
                    title: '流程名称'
                }, {
                    field: 'node',
                    title: '流程节点'
                }
                ]

            });


            if(navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i)){//如果是移动端，默认关闭tab
                $('#table').bootstrapTable("toggleView");
            }

            $('#table').on('check.bs.table uncheck.bs.table load-success.bs.table ' +
                'check-all.bs.table uncheck-all.bs.table', function () {
                $('#remove').prop('disabled', ! $('#table').bootstrapTable('getSelections').length);
                $('#edit').prop('disabled', $('#table').bootstrapTable('getSelections').length!=1);
            });



            $("#search").click("click", function() {// 绑定查询按扭
                $('#table').bootstrapTable('refresh');
            });
            $("#reset").click("click", function() {// 绑定查询按扭
                $("#searchForm  input").val("");
                $("#searchForm  select").val("");
                $('#table').bootstrapTable('refresh');
            });


        });

        function getIdSelections() {
            return $.map($("#table").bootstrapTable('getSelections'), function (row) {
                return row.act
            });
        }
        function getLabelSelections() {
            return $.map($("#table").bootstrapTable('getSelections'), function (row) {
                return row.act
            });
        }
        function getSelections() {
            return $.map($("#table").bootstrapTable('getSelections'), function (row) {
                return row
            });
        }
        function refresh() {
            $('#table').bootstrapTable('refresh');
        }

        function addRow(list, idx, tpl, row){
            $(list).append(Mustache.render(tpl, {
                idx: idx, delBtn: true, row: row
            }));

            rowMap[row.act] = row;
        }

        function delRow(act, prefix){
            var id = $(prefix+"_id").val();
            $(act).parent().parent().remove();
            delete rowMap[id]
        }

        function getRows() {
            var rows = [];
            for(var i in rowMap)
            {
                rows.push(rowMap[i]);
            }
            return rows;
        }
    </script>
</head>
<body class="bg-white">

<div class="wrapper wrapper-content">
    <div class="row">

        <div  class="col-sm-12 col-md-3 animated fadeInRight">
            <div class="accordion-group">
                <table id="table1" style="margin-top: 7px" class="table text-nowrap">
                    <thead>
                    <tr>
                        <th class="hide"></th>
                        <th>已选数据</th>
                        <th>&nbsp;</th>
                    </tr>
                    <tbody id="selectedList">
                    </tbody>
                    <script type="text/template" id="selectedTpl">//<!--
                        <tr id="selectedList{{idx}}">
                            <td class="hide">
                                <input id="selectedList{{idx}}_id" type="hidden" value="{{row.act}}"/>
                                <input id="selectedList{{idx}}_row" type="hidden" value="{{row}}"/>
                            </td>
                            <td>
                                <input readonly="true" type="text" value="{{row.actname}}" class="form-control "/>
                            </td>

                            <td class="text-center" width="10">
                                {{#delBtn}}<span class="close" onclick="delRow(this, '#selectedList{{idx}}')" title="删除">&times;</span>{{/delBtn}}
                            </td>
                        </tr>//-->
                    </script>
                </table>
            </div>
        </div>

        <div  class="col-sm-12 col-md-9 animated fadeInRight">
            <div class="accordion-group">
                <div id="collapseTwo" class="accordion-body">
                    <div class="accordion-inner">
                        <form id="searchForm" class="form form-horizontal well clearfix">
                            <div class="col-xs-4 col-sm-3 col-md-3">
                                <div style="margin-top:26px">
                                    <a  id="search" class="btn btn-default btn-rounded  btn-bordered btn-sm"><i class="fa fa-search"></i> 查询</a>
                                    <a  id="reset" class="btn btn-default btn-rounded  btn-bordered btn-sm" ><i class="fa fa-refresh"></i> 重置</a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div><!-- 搜索框结束 -->
            <!-- 表格 -->
            <table id="table"
                   data-toolbar="#toolbar"
                   data-minimum-count-columns="2"
                   data-id-field="id">
            </table>

        </div>
    </div>
</div>
<script type="text/javascript">
    var selectedRowIdx = 0, selectedTpl = $("#selectedTpl").html().replace(/(\/\/\<!\-\-)|(\/\/\-\->)/g,"");
</script>
</body>
</html>
